<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getOrderDetail, examinePass, examineRefuse, changeOrderStatus } from "@/api/order";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAppStore } from "@/store/app";
const appStore = useAppStore();
const enums = appStore.enums;


const router = useRouter();
const orderInfo = ref(null);
const imgUrl = import.meta.env.VITE_BASE_API + "/api/admin/uploadFile";

const dialogConfig = reactive({
  show: false,
  title: "审核通过"
})

getData()
async function getData() {
  const res = await getOrderDetail({ id: router.currentRoute.value.params.id });
  orderInfo.value = res.data;
  console.log(res.data);
}
const shData = reactive({
  images: [],
  refuse_remark: ""
})
function shFn(title) {
  dialogConfig.title = title;
  dialogConfig.show = true;
}
function getImageUrl() {
  return shData.images
    .map((item) => {
      if (item.response) {
        return item.response.data.url;
      } else {
        return item.url;
      }
    })
    .toString()
}
async function submit(type) {
  const data = {
    id: orderInfo.value.id,
    contract: getImageUrl(),
    refuse_remark: shData.refuse_remark
  }
  const fn = type ? examinePass : examineRefuse;
  if (type && shData.images.length == 0) {
    ElMessage.error("请上传合同");
    return;
  }
  if (!type && !shData.refuse_remark.trim()) {
    ElMessage.error("请输入拒绝原因");
    return;
  }
  const res = await fn(data);
  dialogConfig.show = false;
  ElMessage.success('审核成功');
  if (type) {
    getData()
  } else {
    router.push("/order/index")
  }
}
function fh() {
  ElMessageBox.confirm(
    '确认为此订单发货吗？',
    '发货提醒',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      changeOrderStatus({ id: orderInfo.value.id, status: 60 }).then(res => {
        if (res.code == 200) {
          ElMessage.success('发货成功');
          getData()
        }
      })
    })
}
</script>

<template>
  <div class="container" v-if="orderInfo">
    <div class="title">订单详情</div>
    <div class="box">
      <div class="title">订单信息</div>
      <table class="orderDetailTable">
        <tr>
          <td class="label">用户ID</td>
          <td>{{ orderInfo.user_id }}</td>
          <td class="label">订单状态</td>
          <td>{{ enums[orderInfo.status] }}</td>
        </tr>
        <tr>
          <td class="label">创建时间</td>
          <td>{{ orderInfo.created_at }}</td>
          <td class="label">收货地址</td>
          <td>{{ orderInfo.post_address }}</td>
        </tr>
        <tr>
          <td class="label">收货人姓名</td>
          <td>{{ orderInfo.post_name }}</td>
          <td class="label">收货人手机号</td>
          <td>{{ orderInfo.post_mobile }}</td>
        </tr>
        <tr>
          <td class="label">订单编号</td>
          <td colspan="3">{{ orderInfo.order_sn }}</td>
        </tr>
      </table>
      <div class="title mt-2">商品信息</div>
      <table class="orderDetailTable" v-for="item in orderInfo.goods" :key="item.id">
        <tr>
          <td class="label">商品名称</td>
          <td>{{ item.goods_title }}</td>
          <td class="label">图片</td>
          <td> <el-image :preview-src-list="[item.pic]" style="width: 100px; height: 100px;border-radius: 10px;"
              :src="item.pic" /> </td>
        </tr>
        <tr>
          <td class="label">数量</td>
          <td>{{ item.num }}</td>
          <td class="label">价格</td>
          <td>{{ item.amount }}</td>
        </tr>
        <tr>
          <td class="label">已选规格</td>
          <td colspan="3">{{ item.sku_title }}</td>
        </tr>
      </table>
      <div class="title mt-2">租赁信息</div>
      <table class="orderDetailTable">
        <tr>
          <td class="label">租赁期数</td>
          <td>{{ orderInfo.term }}期</td>
          <td class="label">总租金</td>
          <td>￥{{ orderInfo.amount }}</td>

        </tr>
        <tr>
          <td class="label">已收租金</td>
          <td>￥{{ orderInfo.payed_amount }}</td>
          <td class="label">每期租赁价格</td>
          <td>￥{{ orderInfo.month_amount }}</td>
        </tr>
        <tr>
          <td class="label">商品首期付款</td>
          <td>￥{{ orderInfo.first_amount }}</td>
          <td class="label">待付租金</td>
          <td>￥{{ orderInfo.not_pay_amount }}</td>
        </tr>
      </table>
      <div class="title mt-2">合同</div>
      <table class="orderDetailTable">
        <tr>
          <td class="label" style="width: 200px;">查看与下载</td>
          <td>
            <el-image class="mr-1" v-for="item in orderInfo.contract" :preview-src-list="[item]"
              style="min-width: 100px;min-height: 100px;width: 100px;height: 100px;border-radius: 10px;" :src="item" />
          </td>
        </tr>
      </table>
      <template v-if="orderInfo.status == 30">
        <div class="title mt-2">拒绝理由</div>
        <div>{{ orderInfo.refuse_remark }}</div>
      </template>
      <div class="title mt-2">操作</div>
      <table class="orderDetailTable">
        <tr v-if="orderInfo.status == 10">
          <td class="label w-20">审核操作</td>
          <td>
            <el-button type="primary" @click="shFn('审核通过')">审核通过</el-button>
            <el-button type="warning" @click="shFn('审核拒绝')">审核拒绝</el-button>
          </td>
        </tr>
        <tr v-if="orderInfo.status == 50">
          <td class="label w-20">发货</td>
          <td>
            <el-button type="primary" @click="fh()">发货</el-button>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <el-dialog :close-on-click-modal="false" width="560px" v-model="dialogConfig.show" :title="dialogConfig.title">
    <div v-show="dialogConfig.title == '审核通过'">
      <el-form>
        <el-form-item label="合同" required>
          <el-upload v-model:file-list="shData.images" :action="imgUrl" list-type="picture-card" accept="image/*"
            multiple>
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="submit(true)">确定</el-button>
      </div>
    </div>
    <div v-show="dialogConfig.title == '审核拒绝'">
      <el-form>
        <el-form-item label="拒绝原因" required>
          <el-input v-model="shData.refuse_remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="submit(false)">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<style scoped lang="scss">
.orderDetailTable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgb(238, 238, 238);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border-radius: 10px;

  th,
  td {
    border: 1px solid rgb(238, 238, 238);
    padding: 16px 24px;
    font-weight: 500;
    font-size: 14px;

  }

  .label {
    background-color: #FAFAFA;
    color: rgba(0, 0, 0, 0.65);
    ;
  }
}
</style>